<template>
	<view class="body-view">
		<!--导航和状态栏-->
		<view class="state-navigation">
			<view class="slim_header_navigation d-flex a-center j-center" >
				<view class="left_box" @tap="goBack">
					<image src="/static/center/back.png" class="back"></image>
				</view>
				<view class="title">{{pageData.type==0?'绑定支付宝':'修改支付宝'}}</view>
				<view class="right_box">
					<!-- <image src="/static/center/dian.png" class="dian"></image> -->
				</view>
			</view>
		</view>
		<!-- 顶部位置占位 -->
		<view style="height:calc(100rpx + var(--status-bar-height));"></view>
		<view class="top-describe">请绑定实名用户({{desensitizeName(userInfo?.realName)}})的支付宝账号</view>
		<view class="form-body">
			<view class="form-content">
				<uni-forms ref="form" err-show-type="toast" label-width="180rpx" :modelValue="formData" :rules="rules">
					<uni-forms-item class="form-item" label="支付宝实名" name="name">
						<input :adjust-position="false" class="item-input" placeholder-class="" disabled type="text" v-model="formData.name" placeholder="请输入真实姓名" />
					</uni-forms-item>
					<uni-forms-item class="form-item" label="支付宝账号" name="account">
						<input :adjust-position="false" class="item-input" placeholder-class="" type="text" v-model="formData.account" placeholder="请输入支付宝账号" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view style="height: 100rpx;"></view>
			<tm-button class="button-button w-center" :width="590" :shadow="-1"
			    :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="submit"
			    :label="`${pageData.type==0?'绑定':'修改'}`"></tm-button>
		</view>
	</view>
</template>

<script setup lang="tsx" name="AlipayBinding">
import { ref } from "vue";
import { addSettleAccount,editSettleAccount,getUserDetail1 } from "@/api/api";
import { userData as userDataStore } from "@/store/userData";
import { onLoad } from "@dcloudio/uni-app";
import { desensitizeName } from "@/utils/format";

const userData: any = userDataStore();
const userInfo = ref();
const pageData: any = ref();
onLoad((options:any)=>{
	const params = JSON.parse(options.params);  
	pageData.value = params;
	if(pageData.value.type==1){
		formData.value.account = pageData.value.account;
		formData.value.name = pageData.value.name;
	}
	getUserDetail1({id:userData.id}).then((res:any) => {
		if(res.success){
			userInfo.value  = res.data;
			formData.value.name = userInfo.value?.realName;
			//console.log(userInfo.value)
		}
	});
});
const  goBack = () => {
	uni.navigateBack();
};
const formData: any = ref({
	account:"",
	name:""
})
const rules: any = ref({
	account: {
		rules: [{
				required: true,
				errorMessage: "请输入支付宝账号",
			},
			{
				pattern: /^((\+)?86)?1[3-9]\d{9}|[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
				errorMessage: "请输入正确的支付宝账号",
			}
		]
	},
	name: {
		rules: [{
				required: true,
				errorMessage: "请输入姓名",
			},
			{
				pattern: /^[\u4e00-\u9fa5]+$/,
				errorMessage: "请输入真实姓名",
			},
			{
				minLength: 2,
				maxLength: 10,
				errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
			}
		]
	},
})

const form = ref();
const submit = () => {
	form.value.validate().then((res: any)=>{
		res.type = 2
		res.userId = userData.id
		//新增时
		if(pageData.value.type==0){
			addSettleAccount(res).then((data: any) => {
				if(data.success){
					uni.showToast({
					    title: data.message,  
					    icon: 'success',  
					    duration: 2000,
					});
					setTimeout(function() {
						uni.navigateBack({delta: 1});
					}, 500);
				}else{
					uni.showToast({
					    title: data.message,  
					    icon: 'error',  
					    duration: 2000  
					});
				}
				
			});
		}else{
			//修改时执行方法
			res.id = pageData.value.id;
			editSettleAccount(res).then((data: any) => {
				if(data.success){
					uni.showToast({  
					    title: data.message,  
					    icon: 'success',  
					    duration: 2000,
					});
					setTimeout(function() {
						uni.navigateBack({delta: 1});
					}, 500);
				}else{
					uni.showToast({
					    title: data.message,  
					    icon: 'error',  
					    duration: 2000  
					});
				}
			});
		}
		
		
		//console.log('表单数据信息：', res);
	}).catch((err: any) =>{
		console.log('表单错误信息：', err);
	})
}
</script>

<style lang="scss" scoped>
@import './AlipayBinding.scss';
</style>
